<!DOCTYPE html>
<html>
<head>
	<title>MyProfile</title>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<!--  <script type="text/javascript" src="js/home.js"></script>-->
	<script type="text/javascript" src="js/MyProfile.js"></script>
	<!-- for using modals in bootsrap -->
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" href="css/profile.css"/>
</head>
<body>
	<div ng-app="MyProfile" >
		<div ng-controller="MyProfileController">
			{{ CheckSession()}}
			
	<!-- The NAV bar with header -->
	<nav class="navbar navbar-default navStyle" role="navigation">
   		<div class="navbar-header">
   			<h2 class="headerStyle">Surfers Paradise</h2>
   			<div class="navbar-collapse collapse" id="navbar-footer">
       			<ul class="nav navbar-nav navbar-right">
   					<li><button ng-click = "GoToHomePage()" class="homebtn btn btn-danger navbar-btn" >Home</button></li>			
 				</ul>
 			</div>
   		</div>
   </nav>
   
   <!-- profile details body -->
	<div class="ProfileBody">
		<div class="row panel profilerow">
			<div class="col-md-4 profile_bg">
	    	    <button ng-click="followcurrentprofile()" class="followBtn">Follow</button>
			</div>
	        <div class="col-md-8 col-xs-12">
	           <img ng-src="{{ProfileImg}}" alt="This is the User Profile picture " class="img-thumbnail Profilepicture hidden-xs"/>
	           <div class="Profileheader" >
	                <h1 class="nameStyle" id="NickName"> </h1>
	                <div class="descriptionStyle" id="Description"></div>  
	                 <!-- open a modal of users who the current user is follow --> 
	                 <div>   
	                	<a href="#" class="Mybutton followingBtn" data-toggle="modal" data-target="#followingModal">Following <span class="badge" id ="Following">0</span></a>  		
						<a href="#" class="Mybutton followersBtn" data-toggle="modal" data-target="#followersModal">Followers <span class="badge" id = "Followers">0</span></a>
					</div>  	            	
			  </div>
	        </div>
	    </div>
	    
	    <!-- Alert message when a user start follow another user -->
		<div class="alert alert-success succAlert" id="successAlert" role="alert">
  			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  			<strong>You started follow this user</strong>
		</div>

		<!-- Alert message when a user try to follow a user that he is already follow -->
		<div class="alert alert-danger errAlert" id="errorAlert" role="alert">
  			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  			<strong>You are already follow this user</strong> 
		</div>
	    
	    
	</div>
		<!-- Display the top 10 message of the user -->
		
	    <div class="showMsg">
	    	<div ng-controller="MyProfileMessagesController" >	    
				<div id="messageDesply" ng-repeat="x in UserTenMessagesArray" >
					<div class="message">
						<div class="messageBody">
							<div class="messageHead">
	  							<div class="pull-left about">Topic <a href="topic.html?topic={{x.Topic}}" class="highlight" ng-bind="x.Topic"></a>: </div>
	  								<br/><span class="msgStyle" ng-bind-html="setcheck(x.HtmlTopicVersion)"></span>
	  							<div>
	  								<br><span class="posted">Posted </span> <span class="posted">{{getTime(x.TimeOfPublish)}}</span>
	  							</div>
	  						</div>
	  					</div>
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	  	
	  	<!-- a modal that will show the user the list of following users -->
	  	 <div ng-controller="MyProfileFollowController">
		 	<div class="modal fade" id="followingModal" tabindex="-1" role="dialog" aria-labelledby="followingModal" aria-hidden="true">
				<div class="modal-dialog">
			    	<div class="modal-content modalbodyStyle">
						<div class="modal-header ">
					     	<h4 class="modal-title mdHd" id="myModalLabel">following</h4>
					    </div>
					    <div class="modal-body mdBody">
					    	<div id="messageDesply" class="body" ng-repeat="x in TenUsersWhoIFollow" >
	    						<br/><span ng-bind="x.Name"></span>
	    							<div>
	    								<button type="button" ng-click="follow(x.Name)" class="btn btn-success mdlbtn">follow</button>	
	    							</div> 
	    							<div class="line-separator"></div>
	    					</div>
					   </div>
					   <div class="modal-footer">
					    	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					   </div>
					 </div>
				</div>
			</div>
		</div>
		
		<!-- a modal that will show the user the list of follower users -->
		<div ng-controller="MyProfileFollowMeController">
    		<div class="modal fade" id="followersModal" tabindex="-1" role="dialog" aria-labelledby="followersModal" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content modalbodyStyle">
						<div class="modal-header">
							<h4 class="modal-title mdHd" id="myModalLabel">followers</h4>
						</div>
							<div class="modal-body mdBody">
								<div id="messageDesply" class="body" ng-repeat="x in TenUsersWhoFollowMe" >
	    							<br/><span ng-bind="x.Name"></span>
	    							<div>
	    								<button type="button" ng-click="follow(x.Name)" class="btn btn-success mdlbtn">follow</button>	
 									</div> 
									<div class="line-separator"></div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
								</div>
							</div>
					</div>
				</div>
			</div>    
	  	</div>
	  	
	 
	</div>
</div>
</body>
</html>